<script setup lang="ts">
import { ref, onMounted } from "vue";
import ImgOne from "@/assets/default_img.svg";
import ImgTwo from "@/assets/jgr2.jpg";

    const images = ref([ImgOne, ImgTwo, ImgOne, ImgTwo]);

    //指向当前图片索引
    let currentIndex = ref(0);

    //切换
    const playCarousel = () => {
      currentIndex.value = (currentIndex.value + 1) % images.value.length;
    };

    //不断调用
    onMounted(() => {
      setInterval(playCarousel, 3000);
    });

   
</script>
<template>
  <div class="carousel">
    <div
      class="slide banner-wrap index-swiper"
      v-for="(image, index) in images"
      :key="index"
      :class="{ active: currentIndex === index }"
    >
      <img :src="image" class="banner-img" alt="Carousel Image" />
    </div>
  </div>
</template>
<style>
.carousel {
  position: relative;
  height: 554px;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

.slide.active {
  opacity: 1;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.index-swiper {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  -webkit-box-shadow: 0 3px 8px -6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 8px -6px rgba(0, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.banner-wrap {
  width: 100%;
  height: 554px;
  border-radius: 8px;
  overflow: hidden;
}

.banner-img {
  width: 100%;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
</style>
